<template>
  <el-dialog
    :title="titleMap[mode]"
    v-model="visible"
    width="25%"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="dialogForm"
      label-width="100px"
      label-position="right"
      class="noFlex"
    >
      <el-form-item label="所属字典" prop="codeType">
        <el-cascader
          v-model="form.codeType"
          :options="dic"
          :props="dicProps"
          :show-all-levels="false"
          clearable
        ></el-cascader>
      </el-form-item>
      <el-form-item label="项名称" prop="name">
        <el-input v-model="form.name" clearable></el-input>
      </el-form-item>
      <el-form-item label="键值" prop="value">
        <el-input v-model="form.value" clearable></el-input>
      </el-form-item>
      <el-form-item label="备用字段" prop="standby">
        <el-input v-model="form.standby" clearable></el-input>
      </el-form-item>
      <el-form-item label="是否有效" prop="status">
        <el-switch
          v-model="form.status"
          :active-value="0"
          :inactive-value="1"
        ></el-switch>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" :loading="isSaveing" @click="submit()"
        >保 存</el-button
      >
    </template>
  </el-dialog>
</template>

<script>
export default {
  emits: ['success', 'closed'],
  data () {
    return {
      mode: "add",
      titleMap: {
        add: '新增项',
        edit: '编辑项'
      },
      visible: false,
      isSaveing: false,
      form: {
        codeType: "",//字典类型编码
        name: "",//类型名称
        value: "",//键值
        standby: "",//备用字段
        status: 0//0有效，1无效
      },
      rules: {
        codeType: [
          { type: 'String', required: true, message: '请选择所属字典' }
        ],
        name: [
          { required: true, message: '请输入项名称' }
        ],
        value: [
          { required: true, message: '请输入键值' }
        ]
      },
      dic: [],
      dicProps: {
        value: "dictsortCode",
        label: "dictsortName",
        emitPath: false,
        checkStrictly: true
      }
    }
  },
  mounted () {
    // if (this.params) {
    //   this.form.dic = this.params.code
    // }
    this.getDic()
  },
  methods: {
    //显示
    open (mode = 'add') {
      this.mode = mode
      this.visible = true
      console.log(this.form)
      return this
    },
    //获取字典列表
    async getDic () {
      var res = await this.$API.dictionary.getDictionaryList.get()
      this.dic = res.data
    },
    //表单提交方法
    submit () {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true
          let res = null
          if (this.mode == 'add') {
            console.log(this.form)
            res = await this.$API.dictionary.addDictionaryValue.post(this.form)
          } else if (this.mode == 'edit') {
            delete this.form.createTime
            delete this.form.updateTime
            res = await this.$API.dictionary.updateDictionaryValue.post(this.form)
          }

          this.isSaveing = false
          if (res.code == 200) {
            this.$emit('success', this.form, this.mode)
            this.visible = false
            this.$message.success("操作成功")
          }
        }
      })
    },
    //表单注入数据
    setData (data) {
      console.log(data)
      this.form = data
      console.log(this.form)
    }
  }
}
</script>

<style>
</style>
